<div class="form-group">
    <label for="{{formName+index}}" class="col-sm-4 control-label" ng-class="{'fb-required':required}">{{label}}</label>
    <div class="col-sm-8">
        <input ng-show="component == 'string' || name == 'string'" type="text" ng-model="inputText" validator-required="{{required}}" validator-group="{{formName}}" id="{{formName+index}}" class="form-control"/>
        <textarea ng-show="component == 'textArea' || name == 'textArea'" type="text" ng-model="inputText" validator-required="{{required}}" validator-group="{{formName}}" id="{{formName+index}}" class="form-control" rows="3"/>
        <span class="ui-spinner ui-widget ui-widget-content ui-corner-all" ng-show="component == 'integer' || name == 'integer' || component == 'decimal' || name == 'decimal'">
        	<input type="text" class="ng-scope studio-spinner-input" >
        	<a class="ui-spinner-button ui-spinner-up ui-corner-tr" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-n"></span></a>
        	<a class="ui-spinner-button ui-spinner-down ui-corner-br" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-s"></span></a>
       	</span>
       	<input type="checkbox"  ng-show="component == 'boolean' || name == 'boolean'"/>
       	<div ng-show="component == 'many-to-one' || name == 'many-to-one'" ><i class="fa fa-search"></i><input type="text" class="form-control relational-green"></div>
       	<div ng-show="component == 'one-to-many' || name == 'one-to-many'">
       		<i class="fa fa-plus"></i>
         	<table class="table"><thead><tr><th>Field1</th><th>Field2</th></tr></thead><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
        </div>	
        <div ng-show="component == 'many-to-many' || name == 'many-to-many'" >
       		<i class="fa fa-search"></i>
         	<table class="table"><thead><tr><th>Field1</th><th>Field2</th></tr></thead><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>
        </div>	
        <div ng-show="component == 'date' || name == 'date'">
            <input type='date' class="form-control date-blue" />
        </div>
        <div  ng-show="component == 'datetime' || name == 'datetime'" >
            <input type='datetime-local' class="form-control date-blue" />
        </div>
        <button ng-show="component == 'button' || name == 'button'" class="btn btn-success btn-block">{{label}}</button>
        <p class='help-block' ng-hide="['panel','notebook','panelTab','panelSide',].indexOf(component) > -1 || ['panel','notebook','panelTab','panelSide'].indexOf(name) > -1 ">{{description}}</p>
    </div>
    <hr ng-show="[component,name].indexOf('notebook') > -1" ng-model="notebook"/>
	<ul ng-show="[component,name].indexOf('panelTab') > -1" ng-model="panelTab" class="nav nav-tabs nav-justified">
	  <li class="active"><a href="#">{{label}}</a></li>
	</ul>
    <hr class="hr-normal" ng-show="[component,name].indexOf('panel') > -1" ng-model="panel"/>
    <hr class="hr-side" ng-show="[component,name].indexOf('panelSide') > -1" ng-model="panelSide"/>
    <hr class="hr-dotted" ng-show="[component,name].indexOf('toolbar') > -1" ng-model="toolbar"/>
    <i class="fa fa-save" ng-show="[component,name].indexOf('onSave') > -1" ng-model="onSave"/>
</div>